<template>
  <div class="qrcode">
    <div id="reader"></div>
    <van-icon name="clear" size="40" class="icon-close" @click="cancelScan" />
    <div class="choseImg" @click="choseImg"><van-icon name="photo" class="icon-photo" size="30" @click="choseImg" /></div>
    <div v-show="false">
      <van-uploader ref="uploader" :after-read="afterRead" accept="image/*" />
      <div id="choseImgRender"></div>
    </div>
  </div>
</template>

<script>
import { Html5Qrcode } from 'html5-qrcode';
import { Toast } from 'vant';
export default {
  data() {
    return {
      html5QrCode: null,
      html5QrCodeImg: null
    };
  },
  methods: {
    /**
     * 获取摄像权限
     */
    getCameras: function() {
      const that = this;
      Html5Qrcode.getCameras().then(
        devices => {
          if (devices && devices.length) {
            that.html5QrCode = new Html5Qrcode("reader");
            that.startScan();
          }
        }
      );
    },

    /**
     * 获取扫码内容
     */
    startScan: function() {
      // environment后置 user前置
      this.html5QrCode 
        .start(
          {facingMode: "environment" },
          {
            fps: 2,// 500毫秒扫描一次
            qrbox: { width: 250, height: 250 }, 
          },
          (decodedText) => {
            this.$emit("scanOk", decodedText);
            that.stopScan();
          }
        ).catch((err) => {
          console.log(`Unable to start scanning, error: ${err}`);
        });
    },

    /**
     * 关闭扫码
     */
    stopScan: function() {
      this.html5QrCode.stop().then(() => {
        // QR Code scanning is stopped.
        // console.log("QR Code scanning stopped.");
      }).catch(() => {
        // Stop failed, handle it.
        // console.log("Unable to stop scanning.");
      });
      this.html5QrCodeImg = null;
    },

    /**
     * 取消扫码
     */
    cancelScan: function() {
      this.$emit("cancelScan");
    },

    /**
     * 选择本地图片
     */
    choseImg: function() {
      const uploaderEle = this.$refs.uploader;
      uploaderEle.chooseFile();
    },

    /**
     * 选中图片识别
     * @param e 本地图片
     */
    afterRead: function(e) {
      const { file } = e;
      this.html5QrCodeImg = new Html5Qrcode("choseImgRender"); 
      this.html5QrCodeImg.scanFile(file).then(
        decodedText => {
          this.$emit("scanOk", decodedText);
        }
      ).catch((err) => {
        Toast("识别失败！");
      });
    }
  },
  created() {
    this.getCameras();
  },
  beforeDestroy() {
    this.stopScan();
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.qrcode{
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba($color: #000000, $alpha: 1);

  #reader{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
	}

  .icon-close {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #fff;
  }

  .choseImg {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #fff;
    line-height: 65px;
    text-align: center;
  }
}

</style>